<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{favicon.ico}"  rel="shortcut icon"/>
    <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
<!--bootstarp基于jquery,所以放在前面-->
    <script th:src="@{/webjars/bootstrap/5.0.0/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.0.0/css/bootstrap.css}"/>

<!--    layui引入-->
    <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}"/>


</head>
<body>
<div class="con">

    <div id="header">
        <h3 style="position: absolute;right: 10px;"><a href="/users/logout">退出登录</a></h3>
        <h3>进销存系统欢迎：
            <p th:if="${session.userInfo != null}">
                <span th:text="${session.userInfo.username}">xx</span>，登录。
            </p>
        </h3>
    </div>
    <div class="center">
        <div id="nav">
            <p>
                <a href="/sale/toMainXs" th:class="${pageFlag == 'xs' ? 'active': ''}">销售</a>
            </p>
            <p><a href="/sale/toMainXsList" th:class="${pageFlag == 'xs_list' ? 'active': ''}">销售查询</a></p>
            <p><a href="/sale/toMainXsKc" th:class="${pageFlag == 'xs_kc' ? 'active': ''}">库存</a></p>
            <p><a href="/product/toXsKcY" th:class="${pageFlag == 'xs_kc_yw' ? 'active': ''}">库存yw</a></p>
            <p><a href="/sale/toMainXsKc" th:class="${pageFlag == 'xs_kc_hzl' ? 'active': ''}">库存hzl</a></p>
            <p><a href="/sale/toMainXsKc" th:class="${pageFlag == 'xs_kc_sd' ? 'active': ''}">库存sd</a></p>
        </div>
        <!--    主内容start-->
        <div id="section" th:include="::content">
            页面正文内容
        </div>
        <!--    主内容end-->
    </div>
    <div id="footer">
        @copy; sunpin.com
    </div>
</div>
<style>

    .active{
        background: olivedrab;
    }
    #header {
        background-color:grey;
        color:white;
        /*text-align:center;*/
        padding:5px;
        position: relative;
    }
    .center{
        display: flex;
    }
    #nav {
        line-height:30px;
        background-color:#eeeeee;
        width:20%;
        padding-left:5rem;
    }
    #section {
        /*display: flex;*/
        padding:10px;
        /*justify-content: center;*/
        /*background: red;*/
        flex: 1;
    }
    #footer {
        background-color:grey;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
    }
    ul{
        list-style: none;
    }
</style>
<script>
    $(function(){
       // alert("jq layout1 ready");
    });
</script>
</body>
</html>